{% extends 'base.html' %}

{% block title %}宠物领养系统 - 首页{% endblock %}

{% block content %}
    <!-- 英雄区域 -->
    <div class="jumbotron bg-primary text-white mb-5">
        <div class="container">
            <h1 class="display-4">欢迎来到宠物领养系统</h1>
            <p class="lead">为每一只可爱的宠物找到温暖的家</p>
            <hr class="my-4 bg-white">
            <p class="mb-4">我们致力于为流浪动物提供一个寻找新家的平台，同时帮助有爱心的人们找到适合的伴侣。</p>
            <a class="btn btn-light btn-lg" href="{% url 'pet_list' %}" role="button">浏览可领养宠物</a>
        </div>
    </div>

    <!-- 统计数据 -->
    <div class="row text-center mb-6">
        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body">
                    <h3 class="card-title">{{ pet_types_count }}</h3>
                    <p class="card-text">宠物类型</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body">
                    <h3 class="card-title">{{ available_pets_count }}</h3>
                    <p class="card-text">可领养宠物</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body">
                    <h3 class="card-title">{{ adopted_pets_count }}</h3>
                    <p class="card-text">已成功领养</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 最新宠物 -->
    <div class="mb-6">
        <h2 class="mb-4">最新待领养宠物</h2>
        <div class="row">
            {% for pet in latest_pets %}
                <div class="col-md-4 pet-card">
                    <div class="card h-100">
                        <img src="{{ pet.image.url }}" class="card-img-top pet-img" alt="{{ pet.name }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ pet.name }}</h5>
                            <p class="card-text">
                                类型：{{ pet.type.name }} | 年龄：{{ pet.age }}岁 | 性别：{{ pet.get_gender_display }}<br>
                                状态：<span class="{% if pet.status == 'available' %}text-success{% elif pet.status == 'adopted' %}text-secondary{% else %}text-warning{% endif %}">
                                    {{ pet.get_status_display }}
                                </span>
                            </p>
                            <a href="{% url 'pet_detail' pet.id %}" class="btn btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12 text-center py-5">
                    <p class="text-muted">暂无待领养宠物</p>
                </div>
            {% endfor %}
        </div>
        <div class="text-center mt-4">
            <a href="{% url 'pet_list' %}" class="btn btn-secondary">查看所有宠物</a>
        </div>
    </div>

    <!-- 领养流程 -->
    <div class="bg-light rounded-lg p-6 mb-6">
        <h2 class="text-center mb-4">领养流程</h2>
        <div class="row text-center">
            <div class="col-md-3">
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="text-primary mb-3"><i class="bi bi-search fs-3"></i></div>
                    <h4>浏览选择</h4>
                    <p class="text-muted">浏览可领养宠物，选择心仪的伴侣</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="text-primary mb-3"><i class="bi bi-file-text fs-3"></i></div>
                    <h4>提交申请</h4>
                    <p class="text-muted">填写领养申请表，提供必要信息</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="text-primary mb-3"><i class="bi bi-check-circle fs-3"></i></div>
                    <h4>等待审核</h4>
                    <p class="text-muted">工作人员审核您的领养资格</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="text-primary mb-3"><i class="bi bi-heart fs-3"></i></div>
                    <h4>成功领养</h4>
                    <p class="text-muted">审核通过后，迎接新成员回家</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 领养须知 -->
    <div class="mb-6">
        <h2 class="mb-4">领养须知</h2>
        <div class="card">
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="bi bi-check-circle text-success"></i> 领养人需年满18周岁，有稳定的收入来源</li>
                    <li class="mb-2"><i class="bi bi-check-circle text-success"></i> 需提供有效的身份证明和居住证明</li>
                    <li class="mb-2"><i class="bi bi-check-circle text-success"></i> 同意定期接受回访，确保宠物生活状况良好</li>
                    <li class="mb-2"><i class="bi bi-check-circle text-success"></i> 承诺不虐待、不遗弃宠物，为宠物提供良好的生活环境</li>
                    <li class="mb-2"><i class="bi bi-check-circle text-success"></i> 愿意承担宠物的医疗、饮食等基本费用</li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_css %}
<style>
    .jumbotron {
        padding: 3rem 1rem;
        margin-bottom: 2rem;
        background-color: #2c3e50;
        border-radius: .3rem;
    }
    .shadow-sm {
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    }
</style>
{% endblock %}